<template lang="pug">
  div.home
    my-header(title="Home")
    div.bd
      cube-scroll(ref="scroll"
                  v-bind:options="options"
                  v-on:pulling-down="onPullingDown"
                  v-on:pulling-up="onPullingUp")
        pull-down(slot="pulldown" slot-scope="props" v-bind:props="props")
        pull-up(slot="pullup" slot-scope="props" v-bind:props="props")
        template
          split
          div.banner
            img(src="/static/imgs/1.jpg")
          split
          div.cells
            div.cell(v-for="i in 10")
              div.img-w(v-bind:style="getStyle(i)")
          split
          div.ad
            div.cell(v-for="i in 4")
              div.w(v-bind:style="getStyle(i)")
          split
          div.list
            div.cell(v-for="i in 20")
              div.img-w
                img(v-bind:src="'http://image.zhangxinxu.com/image/study/s/s256/mm'+i+'.jpg'")
              div.cnt-w
                div.tt 吴敦义向蔡英文申请赴{{i}}
                div.cnt 这道拌饭用的大米取自前总统卢武铉的故乡，庆尚南道金海市峰下村，由稻田鸭农法培育而成，上面的野菜同样来历不凡，它们是从三八线韩方一侧采摘来的。
          split
    my-footer
</template>
<script type="text/ecmascript-6">
  import MyHeader from '../comm/MyHeader'
  import MyFooter from '../comm/MyFooter'
  import PullDown from '../comm/PullDown'
  import PullUp from '../comm/PullUp'
  import Split from '../comm/Split'
  import ListItem from '../comm/ListItem'
  import ItemCell from '../comm/ItemCell'

  export default {
    data() {
      return {
        options: {
          pullDownRefresh: true,
          pullUpLoad: true
        }
      }
    },
    methods: {
      onPullingDown() {
        console.log('onPullingDown')
        setTimeout(() => {
          this.$refs.scroll.forceUpdate()
        }, 2000)
      },
      onPullingUp() {
        console.log('onPullingUp')
        setTimeout(() => {
          this.$refs.scroll.forceUpdate()
        }, 2000)
      },
      getStyle(index) {
        return {
          backgroundImage: `url(http://image.zhangxinxu.com/image/study/s/s256/mm${index}.jpg)`
        }
      }
    },
    computed: {},
    components: {
      MyHeader,
      MyFooter,
      Split,
      PullDown,
      PullUp,
      ListItem,
      ItemCell
    }
  }
</script>
<style scoped lang="stylus" type="text/stylus">
  @import "../assets/stylus/border.styl"
  .home
    position absolute
    top 0
    left 0
    display flex
    flex-direction column
    width 100%
    height 100%
    .bd
      flex 1
      overflow auto
      .banner
        background-color #ffffff
        img
          display block
          width 100%
      .cells
        overflow hidden
        padding 6px
        background-color #ffffff
        .cell
          float left
          width 20%
          .img-w
            display block
            position relative
            border-radius 50%
            overflow hidden
            margin 6px
            background-size cover
            box-shadow 0 0 2px rgba(0, 0, 0, 1)

            &:after
              display block
              content ''
              padding-top 100%
            img
              position absolute
              width 100%
              top 0
              left 0
      .ad
        overflow hidden
        padding 6px
        background-color #ffffff
        .cell
          position relative
          width 50%
          float left
          background 50% 0 no-repeat
          background-size cover
          box-sizing border-box
          &:after
            display block
            content ''
            padding-top 70%
          .w
            position absolute
            top 6px
            left 6px
            right 6px
            bottom 6px
      .list
        padding 0 12px
        background-color #ffffff
        .cell
          display flex
          padding 12px 0
          position relative
          &:not(:first-child)
            &:after
              setTopLine(#cccccc)
          .img-w
            position relative
            width 35vw
            overflow hidden
            margin-right 12px
            &:after
              display block
              content ''
              padding-top 70%
            img
              position absolute
              display: block
              width 100%
          .cnt-w
            flex 1
            text-align left
            .tt
              font-size 16px
              line-height 1em
              height 1em
            .cnt
              margin-top 8px
              font-size 14px
              line-height 18px
              height 36px
              overflow hidden
              color #999999
              text-overflow ellipsis
              display -webkit-box
              -webkit-line-clamp 2
              -webkit-box-orient vertical

</style>
